<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>党建介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>登录次数监控图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>情况汇总饼状图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>


    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>各部门组织人数柱状图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title : {
                text: '近7天访问量'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最高访问量','最低访问量']
            },
            grid:{
                x:40,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : []
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'最高访问量',
                    type:'line',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);

        $.ajax({
            url:"/party-platform/monitor/logininfor/sevenCountNumReport",
            async: false,
            cache: false,
            success:function (data) {
                lineChart.setOption({
                    xAxis: {data: data.dates},
                    series: [{data: data.countNum}]
                })
            }
        });

        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title : {
                text: '各组织人数汇总'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['人数']
            },
            grid:{
                x:30,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : {data : []},
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'人数',
                    type:'bar',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        barChart.setOption(baroption);

        window.onresize = barChart.resize;
        $.ajax({
            url:"/party-platform/monitor/logininfor/sysUserReport",
            async: false,
            cache: false,
            success:function (data) {
                barChart.setOption({
                    xAxis: {data: data.dept},
                    series: [{data: data.data}]
                })
            }
        });

        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title : {
                text: '评论饼状图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:[]
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '70%',
                    center: ['50%', '60%'],
                    data:[]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);

        $.ajax({
            url:"/party-platform/monitor/logininfor/getCommentsReport",
            async: false,
            cache: false,
            success:function (data) {
                var names=[];
                var nums=[];
                $.each(data,function (key,values) {
                    names.push(values);
                    var obj = new Object();
                    obj.name = values;
                    obj.value = key;
                    nums.push(obj);
                });
                pieChart.setOption({
                    legend: {data: names},
                    series: [{data: nums}]
                })
            }
        });
    });
</script>
</body>
</html>
